<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" type="text/css" href="/H5/css/main.css?v=6" />
    <style>
        .card:nth-child(odd){left:4%!important;}
    </style>
</head>
<body>
<div class="page-group ms-controller" :controller="index1">
    <div class="page page-current">
        <div class="content visibility" style="padding-top: 40px; background-color: #f3f4f5;">
            <ul class="logo" style="position: fixed; top: 0; z-index: 9999999;max-width:540px">
                <a href="javascript:history.back(-1);" class="icon icon-left pull-left" style="padding-top:.55rem;padding-left:.5rem;padding-right:1.5rem;"></a>
                <li class="logo_center" style="background-color: #fff; padding-top: 8px;width:75%;">
                    <div class="search-input col-80" style="height: 24px">
                        <label class="icon icon-search" for="search"></label>
                        <input type="search" :on-focus="@search" id='search' style="height: 24px; border: 1px solid #eee; background-color: #eee"/>
                    </div>
                </li>
            </ul>
            <div class="banner" style="height: 200px; position: relative;">
                <ul style="margin-left: -100%">
                    <li style="float: left; height: 200px" :for="el in banner"><a :attr="{'href': el.link_url}" style="display:block; background-color: #eee; width:100%; height: 100%;">
                        <img :attr="{'src': el.pic_path}" width='100%' height="100%" onerror="$(this).css('display','none')" alt="">
                    </a></li>
                </ul>
                <div class="tip" style="position: absolute; bottom: 10px; z-index: 99999; transform: translate(-50%, 0); left: 50%">
                    <span style="float: left; margin: 0 5px; width:6px; height: 6px;border-radius: 6px;background-color: #ddd" :for="el in @banner"></span>
                </div>
            </div>
            <div class="icons">
                <!-- <a href="/H5/notice">
                    <div><img src="/H5/images/icon_31.png" /></div>
                   精彩导购
                </a> -->

                <a :attr="{'href': '/H5/goodstype?id='+el.id}" :for="el in poster">
                    <div><img :attr="{'src': el.pic_url||'/H5/images/none.png'}" /></div>
                    {{el.title}}
                </a>
            </div>
            <div class="card demo-card-header-pic" :for="e in goods" style="margin: .5rem 0 0 0;width: 47%;left:2%;display:inline-block;" :on-click="@jump(e.id)">
                <div valign="bottom" class="card-header color-white no-border no-padding">
                    <a :css="{'background-image': e.list_cover?'url('+e.list_cover+')':'#eee'}" class="goods" style="display: block;width: 100%;height: 152px;background-size: contain; background-position: center; background-repeat: no-repeat;">
                    </a>
                </div>
                <div class="card-content">
                    <div class="card-content-inner" style="overflow: hidden;padding: .3rem;">
                        <p class="color-gray" style="color: #8c2193; font-size: .8rem; padding-bottom: 10px;border-bottom: 1px dashed #aaa;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;">{{e.title+" "+e.intro}}</p>
                        <p style="color: rgb(222, 66, 101); font-size: .8rem">￥{{e.vip_price}}<span style="color: #ddd; text-decoration: line-through; font-size: .7rem; margin-left: .2rem;">￥{{e.sell_price}}</span><span style="float: right; font-size: .7rem; background-color: #e66ca6; color: #fff; padding: .3rem; border-radius: 2px">立即购买</span></p>
                    </div>
                </div>
            </div>
            <div style="height: 2.6rem;width:100%"></div>
            <footer>
                <p class="bah"></p>
            </footer>
        </div>
        <nav class="bar bar-tab" style="background-color: white;font-size: .55rem;">
            <a class="tab-item external active" href="/H5">
                <span class="new_footer"><img src="/H5/images/footer_01.png" alt=""></span>
                <span class="tab-label special">首页</span>
            </a>
            <!--<a class="tab-item external" href="/H5/custom?type=1">
                <span class="new_footer"><img src="/H5/images/footer_02.png" alt=""></span>
                <span class="tab-label">客服</span>
                &lt;!&ndash; <span class="badge" :if="@message>0">{{@message}}</span> &ndash;&gt;
            </a>-->
            <a class="tab-item external" href="/H5/order">
                <span class="new_footer"><img src="/H5/images/footer_03.png" alt=""></span>
                <span class="tab-label special">购物车</span>
            </a>
            <a class="tab-item external" href="/H5/orderlist?status=0">
                <span class="new_footer"><img src="/H5/images/footer_04.png" alt=""></span>
                <span class="tab-label special">订单管理</span>
            </a>
            <!-- <a class="tab-item external" href="/H5/message">
              <span class="icon icon-message"></span>
              <span class="tab-label">订单管理</span>
              <span class="badge" :if="@message>0">{{@message}}</span>
            </a> -->
            <a class="tab-item external" href="/H5/member">
                <span class="new_footer"><img src="/H5/images/footer_05.png" alt=""></span>
                <span class="tab-label special">我的</span>
            </a>
        </nav>
    </div>
</div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='/H5/js/wx.js' charset='utf-8'></script> -->
<!-- <script type='text/javascript' src='http://res2.wx.qq.com/open/js/jweixin-1.4.0.js' charset='utf-8'></script> -->
<script type='text/javascript' src='/H5/js/mall.js?v=11' charset='utf-8'></script>
<script>
    var timer;
    var index = avalon.define({
        $id: "index1",
        loading: false,
        message: "",
        index: 1,
        banner:[],
        alist:[],
        iv: simpleStorage.get( 'inviteCode' ),
        is_vip: Mall.parseUrl(window.location.href).is_vip,
        picture_urls: "",
        goods: [],
        poster: [],
        data: {},
        jump: function( id ){
            window.location.href = index.iv?'/H5/detail?id='+id+'&inviteCode='+index.iv:'/H5/detail?id='+id
        },
        search: function(){
            window.location.href = "/H5/search"
        },
        getMallHome: function(){
            Mall.request( "/api/MallHome", {page_size: 50, is_vip: index.is_vip} )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            index.banner = data.data.banner;
                            index.poster = data.data.poster;
                            index.goods = data.data.index_list;
                            $( $( ".tip span" )[0] ).css( "background-color", "#0C3" )
                            if( data.data.banner && data.data.banner.length > 1 ){
                                if(data.data.banner.length == 2){
                                    var datas = data.data.banner;
                                    datas.push( data.data.banner[0] );
                                    index.banner = datas;
                                }
                                $( ".banner ul" ).css( "width", index.banner.length*100+"%" );
                                $( ".banner ul li" ).css( "width", 100/index.banner.length+"%" );
                                function autoRoll(){
                                    $( ".banner ul" ).animate({"margin-left": "-200%"}, 300, "linear",function(){
                                        $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul" );
                                        $( ".banner ul" ).css({"margin-left": "-100%"});
                                        $( ".tip span" ).css( "background-color", "#ddd" );
                                        index.index += 1;
                                        if( index.index > data.data.banner.length ){
                                            index.index = 1
                                        }
                                        $( $( ".tip span" )[index.index-1] ).css( "background-color", "#0C3" );
                                    })
                                }
                                timer = setInterval( function(){autoRoll();}, 3000 );
                                function swipe( k ){
                                    timer && clearInterval( timer );
                                    if( k == "left" ){
                                        $(".banner ul").animate({"margin-left": "-200%"},300,"linear",function(){
                                            $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul" );
                                            $(".banner ul").css({"margin-left": "-100%"});
                                            index.index += 1;
                                            if( index.index > data.data.banner.length ){
                                                index.index = 1
                                            }
                                            $( ".tip span" ).css( "background-color", "#ddd" )
                                            $( $( ".tip span" )[index.index-1] ).css( "background-color", "#0C3" )
                                            timer = setInterval( function(){autoRoll();}, 3000 )
                                        })
                                    }
                                    else{
                                        $(".banner ul").animate({"margin-left": 0},300,"linear",function(){
                                            $($(".banner ul li")[$(".banner ul li").length-1]).remove().clone().prependTo(".banner ul" );
                                            $(".banner ul").css({"margin-left": "-100%"});
                                            index.index -= 1;
                                            if( index.index < 1 ){
                                                index.index = data.data.banner.length
                                            }
                                            $( ".tip span" ).css( "background-color", "#ddd" )
                                            $( $( ".tip span" )[index.index-1] ).css( "background-color", "#0C3" )
                                            timer = setInterval( function(){autoRoll();}, 3000 )
                                        })
                                    }
                                }
                                $(".banner ul").swipeLeft( function(){
                                    swipe( "left" );
                                } )
                                $(".banner ul").swipeRight( function(){
                                    swipe();
                                } )
                            }
                            avalon.scan( document.body );
                        }
                        $(".content").removeClass("visibility")
                    } )
        },
        getArticle: function(){
            Mall.request( "/api/ArticleList", {cate: "activity", page_num:1, page_size:3} )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            index.alist = data.data.list
                        }
                    } )
        },
        squan: function(){
            var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
            var url = "";
            if( simpleStorage.get("toUrl") ){
                url = simpleStorage.get("toUrl");
            }
            else{
                url = '/H5'
            }
            if(is_weixin){
                Mall.request( "/api/OauthCheck", {jump_url: url} )
                        .always( function( data ){
                            if( data.error_code == 0 ){
                                if( data.data.is_oauth ){
                                    if( data.data.api_token ){
                                        simpleStorage.set("token", data.data.api_token);
                                        simpleStorage.set("expire_time", data.data.expire_time*1000);
                                        window.location.href='/H5';
                                    }
                                }
                                else{
                                    Mall.request("/api/Logout")
                                            .always(function(data){
                                                if( data.error_code == 0 ){
                                                    simpleStorage.set('token', undefined);
                                                    simpleStorage.set('isOauth', undefined);
                                                }
                                            })
                                }
                                simpleStorage.set("isOauth", data.data.is_oauth);
                            }
                        } )
            }
        },
        getUrl: function(){
            if( index.loading ){
                return
            }
            index.loading = true;
            Mall.request( "/api/SynLogin" )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            window.location.href = data.data.syn_login_url
                        }
                        else{
                            $.alert(data.error_msg);
                            index.loading = false;
                        }
                    } )
        },
        info: function(){
            Mall.request( "/api/UserInfo" )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            index.message = data.data.total_unread;
                        }
                    } )
        }
    })
    index.getMallHome();
    index.getArticle();
    if(simpleStorage.get( "token" )){
        index.info();
    }
    if( simpleStorage.get( "token" ) && !simpleStorage.get( "isOauth" ) ){
        // index.squan();
    }
</script>
</body>
</html>